<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  Gpsquare,
  GpsquareDz,
  GpsquareDel,
  GpsquareReport,
  heatArrange,
  GpsquareAdd,
} from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {},
      showSend: false,
      tableData: [],
      queryData: {
        fb_type: "",
        search: "",
        page: 1,
        per_page: 20,
      },
      total: 0,
      navArr: [
        { name: "全部论坛", value: "" },
        { name: "招募船员广场", value: "1" },
        { name: "派发船员广场", value: "2" },
      ],
      navId: "",
      fb_type: "1",
      content: "",
      type: "1",
      hotArr: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    keyDownFn(e) {
      if (e.keyCode == 13) {
        this.serchFn();
      }
    },
    inputFn() {
      if (this.queryData.search == "") {
        this.serchFn();
      }
    },
    serchFn() {
      this.queryData.page = 1;
      this.getData();
      this.getHot();
    },
    async sureSend() {
      if (!this.content) {
        ElMessage({
          type: "info",
          message: "发布内容不能为空",
        });
        return false;
      }
      if (this.containsEmoji(this.content)) {
        ElMessage({
          type: "info",
          message: "发布内容不能包含表情符",
        });
        return false;
      }
      const { data } = await GpsquareAdd({
        type: this.type,
        fb_type: this.fb_type,
        content: this.content,
      });

      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "发布成功",
        });
        this.content = "";
        this.fb_type = "1";
        this.type = "1";
        this.getData();
        this.getHot();
        this.showSend = false;
      }
    },
    delFn(row) {
      ElMessageBox.confirm("确定删除此帖吗?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await GpsquareDel({
          gp_square_id: row.gp_square_id,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          this.getData();
          this.getHot();
        }
      });
    },
    navFn(item) {
      this.navId = item.value;
      this.queryData.fb_type = item.value;
      this.serchFn();
    },
    getData() {
      Gpsquare(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
    dzFn(item) {
      let data = {
        type: item.is_dz == 1 ? 2 : 1,
        gp_square_id: item.gp_square_id,
      };
      GpsquareDz(data).then((res) => {
        if (res.data.code == 1) {
          this.getData();
          this.getHot();
        }
      });
    },
    reportFn(row) {
      ElMessageBox.prompt("请输入你举报此贴的原因", "举报操作", {
        confirmButtonText: "立即举报",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          console.log(value);
          const { data } = await GpsquareReport({
            gp_square_id: row.gp_square_id,
            report_content: value,
          });
          if (data.code == 1) {
            ElMessage({
              type: "success",
              message: "举报成功",
            });
          }
        })
        .catch(() => {});
    },
    getHot() {
      heatArrange(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.hotArr = res.data.data;
        }
      });
    },
    containsEmoji(str) {
      // 使用正则表达式匹配Unicode编码范围内的表情符号
      const regex =
        /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g;
      return regex.test(str);
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getHot();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="talkCont">
          <div class="talkLeft">
            <div class="talkHead">
              <div class="navCont">
                <div
                  @click="navFn(item)"
                  :class="navId == item.value ? 'navItem navActive' : 'navItem'"
                  :key="index"
                  v-for="(item, index) in navArr"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="serchCont">
                <div class="inputCont">
                  <input
                    @keydown="keyDownFn($event)"
                    @input="inputFn"
                    v-model="queryData.search"
                    placeholder="请输入关键词搜索"
                  />
                </div>
                <el-button
                  color="#626aef"
                  style="height: 40px; width: 100px"
                  round
                  @click="serchFn"
                  >搜索</el-button
                >
              </div>
            </div>
            <div class="talkMain">
              <div
                class="talkItem has_yy"
                :key="index"
                v-for="(item, index) in tableData"
              >
                <img
                  class="quickImg"
                  v-if="item.type == 2"
                  src="/img/quick.png"
                />
                <div class="userCont" v-if="item.enterprise_info">
                  <img
                    class="userImg"
                    :src="item.enterprise_info.enterprise_logo"
                  />
                  <div class="userInfo">
                    <div class="userName">
                      <div>{{ item.enterprise_info.enterprise_name }}</div>
                      <div v-if="item.fb_type == 2" class="typeTag typeTag_">
                        派员
                      </div>
                      <div v-if="item.fb_type == 1" class="typeTag">招募</div>
                    </div>
                  </div>
                  <div class="sendTime">{{ item.create_time }}</div>
                </div>
                <div class="talkInfo">
                  {{ $converData.changeLine(item.content) }}
                </div>
                <div class="talkInfo talkCtrl">
                  <div class="talkCtrlLeft">
                    <div
                      :class="item.is_dz == 1 ? 'ctrlItem isDz' : 'ctrlItem'"
                      @click="dzFn(item)"
                    >
                      <div class="iconfont icon-dianzan_kuai"></div>
                      <div>{{ item.dz_sum }}</div>
                    </div>
                    <div class="ctrlItem" @click="reportFn(item)">
                      <div class="iconfont icon-Report"></div>
                      <div class="ctrlText">举报</div>
                    </div>
                    <div
                      class="ctrlItem"
                      v-if="item.is_auth == 1"
                      @click="delFn(item)"
                    >
                      <div class="iconfont icon-shanchu"></div>
                      <div class="ctrlText">删除</div>
                    </div>
                  </div>
                  <div class="ctrlBtn">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.staff_name + '（' + item.mobile + '）'"
                      placement="top-start"
                    >
                      <el-button type="warning" link>
                        <span
                          class="iconfont icon-24gl-phoneLoudspeaker"
                        ></span>
                        <span>电话沟通</span></el-button
                      >
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <el-empty v-if="tableData.length == 0" :image-size="100" />
            </div>
            <div class="pageCont">
              <el-pagination
                v-model:currentPage="queryData.page"
                v-model:page-size="queryData.per_page"
                background
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="getData"
                @current-change="getData"
              />
            </div>
          </div>
          <div class="hotTalk">
            <div class="hotTitle">
              <div class="iconfont icon-remen"></div>
              <div>热度榜</div>
            </div>
            <div class="hotList">
              <div class="hotItem" :key="index" v-for="(item, index) in hotArr">
                <div v-if="item.fb_type == 2" class="hotNum">派</div>
                <div v-if="item.fb_type == 1" class="hotNum hotNum_">招</div>
                <el-popover placement="right" :width="400" trigger="click">
                  <div class="talkItem">
                    <img
                      class="quickImg"
                      v-if="item.type == 2"
                      src="/img/quick.png"
                    />
                    <div class="userCont" v-if="item.enterprise_info">
                      <img
                        class="userImg"
                        :src="item.enterprise_info.enterprise_logo"
                      />
                      <div class="userInfo">
                        <div class="userName">
                          <div>{{ item.enterprise_info.enterprise_name }}</div>
                        </div>
                      </div>
                      <div class="sendTime">{{ item.create_time }}</div>
                    </div>
                    <div class="talkInfo">
                      {{ $converData.changeLine(item.content) }}
                    </div>
                    <div class="talkInfo talkCtrl">
                      <div class="talkCtrlLeft">
                        <div
                          :class="
                            item.is_dz == 1 ? 'ctrlItem isDz' : 'ctrlItem'
                          "
                          @click="dzFn(item)"
                        >
                          <div class="iconfont icon-dianzan_kuai"></div>
                          <div>{{ item.dz_sum }}</div>
                        </div>
                        <div class="ctrlItem" @click="reportFn(item)">
                          <div class="iconfont icon-Report"></div>
                          <div class="ctrlText">举报</div>
                        </div>
                        <div
                          class="ctrlItem"
                          v-if="item.is_auth == 1"
                          @click="delFn(item)"
                        >
                          <div class="iconfont icon-shanchu"></div>
                          <div class="ctrlText">删除</div>
                        </div>
                      </div>
                      <div class="ctrlBtn">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="item.staff_name + '（' + item.mobile + '）'"
                          placement="top-start"
                        >
                          <el-button type="warning" link>
                            <span
                              class="iconfont icon-24gl-phoneLoudspeaker"
                            ></span>
                            <span>电话沟通</span></el-button
                          >
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                  <template #reference>
                    <div class="hotText">
                      {{ item.content }}
                    </div>
                  </template>
                </el-popover>
              </div>
              <el-empty v-if="hotArr.length == 0" :image-size="100" />
            </div>
          </div>
        </div>
      </div>
      <el-button class="sendBtn" type="primary" @click="showSend = true" circle>
        <span class="iconfont icon-fatie"></span>
      </el-button>
      <el-drawer
        v-model="showSend"
        :size="350"
        :with-header="false"
        direction="btt"
      >
        <div class="sendMain">
          <div class="sendTitle">发布需求</div>
          <div class="sendItem">
            <el-radio-group v-model="type">
              <el-radio value="1">普通帖子</el-radio>
              <el-radio value="2">加急帖子</el-radio>
            </el-radio-group>
          </div>
          <div class="sendItem">
            <el-radio-group v-model="fb_type">
              <el-radio value="1">发布招募船员</el-radio>
              <el-radio value="2">发布派发船员</el-radio>
            </el-radio-group>
          </div>
          <div class="sendItem">
            <el-input
              v-model="content"
              maxlength="300"
              style="width: 500px"
              placeholder="请文明发言、一经发现辱骂、违规、不实、政治敏感等信息，一经核实，将面临封号"
              show-word-limit
              rows="5"
              type="textarea"
            />
          </div>
          <div style="flex: auto">
            <el-button type="primary" @click="sureSend">确认发布</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.talkCont {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  height: 100px;
  display: flex;
  justify-content: center;
  .talkLeft {
    flex: 1;
    width: 500px;
    height: 100%;
    .talkHead {
      display: flex;
      padding: 0 15px;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      .navCont {
        display: flex;
        align-items: center;
        .navItem {
          line-height: 32px;
          font-size: 12px;
          padding: 0 15px;
          border: 1px solid #4b58dc;
          margin-right: 5px;
          border-radius: 5px;
          cursor: pointer;
          color: #4b58dc;
        }
        .navActive {
          background-color: #4b58dc;
          color: #fff;
        }
      }
      .serchCont {
        width: 100px;
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 30px;
        .inputCont {
          width: 400px;
          flex: 1;
          border: 1px solid #4b58dc;
          border-radius: 40px;
          padding: 0px 15px;
          height: 40px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-right: 30px;
          input {
            border: none;
            width: 100%;
            text-align: center;
            outline: none;
            font-size: 13px;
            height: 36px;
            background: none;
          }
        }
      }
    }
    .talkMain {
      width: 100%;
      padding: 15px;
      margin-top: 10px;
      box-sizing: border-box;
    }
  }
  .hotTalk {
    width: 350px;
    padding: 15px;
    box-sizing: border-box;
    margin-top: 65px;
    max-height: 450px;
    box-shadow: 0 0 15px #d8d5d5;
    border-radius: 5px;
    .hotTitle {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      .iconfont {
        color: red;
        margin-right: 5px;
        font-size: 18px;
      }
    }
    .hotList {
      .hotItem {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .hotText {
          flex: 1;
          width: 100px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 13px;
        }
        .hotText:hover {
          color: #4b58dc;
          text-decoration: underline;
          cursor: pointer;
        }
        .hotNum {
          width: 20px;
          height: 20px;
          background-color: #639948;
          color: #fff;
          font-size: 12px;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          margin-right: 15px;
        }
        .hotNum_ {
          background-color: #f56c6c;
        }
      }
    }
  }
}
.sendBtn {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 70px;
  bottom: 40px;
}
.sendMain {
  width: 500px;
  margin: 0 auto;
  .sendTitle {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .sendItem {
    margin-bottom: 15px;
  }
}
.talkItem {
  width: 100%;
  padding: 0 15px;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  .quickImg {
    position: absolute;
    right: 50px;
    top: 15px;
    width: 60px;
    transform: rotate(75deg);
  }
  .userCont {
    display: flex;
    align-items: center;
    .userImg {
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }
    .userInfo {
      flex: 1;
      margin: 0 15px;
      .userName {
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        .typeTag {
          font-size: 12px;
          font-weight: normal;
          padding: 3px 10px;
          color: #fff;
          background-color: #f56c6c;
          border-radius: 40px;
          margin-left: 10px;
        }
        .typeTag_ {
          color: #fff;
          background-color: #639948;
        }
      }
      .userDes {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-top: 5px;
        color: #333;
        .userDesItem {
          margin-right: 15px;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 12px;
            margin-right: 5px;
          }
        }
      }
    }
    .sendTime {
      font-size: 12px;
      color: #999;
    }
  }
  .talkInfo {
    width: 100%;
    padding-left: 45px;
    font-size: 12px;
    box-sizing: border-box;
    white-space: pre-wrap;
  }
  .talkCtrl {
    display: flex;
    margin-top: 5px;
    align-items: center;
    justify-content: space-between;
    .talkCtrlLeft {
      display: flex;
      align-items: center;
      .ctrlItem {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 20px;
        color: #666;
        .iconfont {
          margin-right: 5px;
          font-size: 14px;
        }
        .icon-Report {
          font-size: 16px;
        }
        .ctrlText {
          font-size: 12px;
        }
      }
      .isDz {
        color: #f56c6c;
      }
    }
    .ctrlBtn {
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 5px;
      }
    }
  }
}
.has_yy {
  box-shadow: 0 0 15px #d8d5d5;
  margin-bottom: 15px;
  padding: 15px;
}
</style>
